<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>选择部门</title>
    <link rel="stylesheet" th:href="@{/css/admin/base.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <link rel="stylesheet" th:href="@{/lib/tree/zTreeStyle.css}" type="text/css">

    <style>
        .tree-con {
            width: 50%;
        }
    </style>
</head>

<body>
<div class="app-content z-flex-row">

    <div class="tree-con">
        <div class="selectAll">
            <input type="checkbox" id="selectAll"></input>
            <label for="selectAll">全部</label>
        </div>

        <ul id="tree" class="ztree"></ul>

    </div>
    <div class="body src-ids z-hide"></div>
    <div class="body src-names"></div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/lib/tree/jquery.ztree.core-3.5.js}"></script>
<script th:src="@{/js/tree.js}"></script>
<script type="text/javascript" th:src="@{/lib/tree/jquery.ztree.excheck-3.5.min.js}"></script>

<script>

    var zTree = {};

    var selectType = '';

    $(function () {

        var params = App.getUrlParams();

        selectType = (params && params.selectType) || 'single';

        //生成树结构
        zTree = (new Tree).init({
            check: {
                enable: (selectType == 'mutil') ? true : false,
                chkStyle: (selectType == 'mutil') ? 'checkbox' : '',
                // radioType: "all"
            },
            async: {
                url: App.apiUrlHost + '/sysDepartment/list',
            },
            callback: {
                // beforeClick: beforeClick,
                // beforeAsync: beforeAsync,
                // onAsyncError: onAsyncError,
                // onAsyncSuccess: onAsyncSuccess,
                onCheck: onCheck,
                onClick: zTreeOnClick
            },
        });

        $('#selectAll').click(function () {
            $('.src-ids').html('');
            $('.src-names').html('全部部门');
        });

    })

    function getIds() {
        var selectedNodes = zTree.tree.getCheckedNodes(true);

        var nodes = [];

        if (selectedNodes.length <= 0) {
            console.log('请选择部门');
            return [];
        } else {
            for (var i = 0; i < selectedNodes.length; i++) {
                if (selectedNodes[i].id) {
                    nodes.push(selectedNodes[i]);
                }

            }
        }
        return nodes;
    }

    function zTreeOnClick(event, treeId, treeNode) {

        if (selectType == 'mutil') {

            zTree.tree.checkNode(treeNode);
            var nodes = getIds();

            var names = [], ids = [];

            for (var i = 0; i < nodes.length; i++) {

                names.push(nodes[i].name);
                ids.push(nodes[i].id);
            }

            // 多选
            $('.src-ids').html(ids.join('<br/>'));
            $('.src-names').html(names.join('<br/>'));
        } else {
            // 单选
            $('.src-ids').html(treeNode.id);
            $('.src-names').html(treeNode.name);
        }
    }

    function onCheck(event, treeId, treeNode) {

        var nodes = getIds();

        var names = [], ids = [];

        for (var i = 0; i < nodes.length; i++) {

            names.push(nodes[i].name);
            ids.push(nodes[i].id);
        }


        $('.src-ids').html(ids.join('<br/>'));
        $('.src-names').html(names.join('<br/>'));
    }

    function filter(treeId, parentNode, data) {

        console.log('过滤数据');
        if (data.code == 0) {

            data.data = JSON.parse(JSON.stringify(data.data).replace(/parentId/g, 'pId'));
            data.data = JSON.parse(JSON.stringify(data.data).replace(/departmentId/g, 'id'));
            data.data = JSON.parse(JSON.stringify(data.data).replace(/departmentName/g, 'name'))

            var childNodes = data.data;

            return childNodes;
        } else {

            return null;
        }

    }

</script>
</body>

</html>